<template>
    <div>
        <table border="1" style="border-collapse: collapse;width:100%;">
            <tr>
                <td colspan="2" width="100">
                    <div class="tips" title="创建时间">订单日期</div>
                </td>
                <td colspan="2" width="200">
                    <div class="val">{{ orderDatalist.createTime }}</div>
                </td>
                <td colspan="2" width="100">
                    <div class="tips">订单编号</div>
                </td>
                <td colspan="2" width="200">
                    <div class="val">{{ orderDatalist.orderId }}</div>
                </td>
                <td colspan="2" width="100">
                    <div class="tips">经手人</div>
                </td>
                <td colspan="2" width="200">
                    <div class="val">{{ formInline.jingshou }}</div>
                </td>
            </tr>
            <tr>
                <td colspan="2" width="100">
                    <div class="tips">
                        往来单位
                    </div>
                </td>
                <td colspan="12" width="500">
                    <div class="val">
                        {{ orderDatalist.agentName }}
                    </div>
                </td>
            </tr>
            <tr>
                <!-- <td colspan="2" width="100">
                            <div class="tips">{{ orderDatalist.statusStr.key === 'toBeWrittenOff' ? '提货信息' : '收货信息' }}
                            </div>
                        </td> -->
                <td colspan="12" width="500">

                    <div class="val">
                        {{ orderDatalist.statusStr.key === 'toBeWrittenOff' ? '提货信息：' : '收货信息：' }}
                        {{ orderDatalist.realName }}
                        {{ orderDatalist.userAddress }}
                        {{ orderDatalist.userPhone }}
                    </div>
                </td>

            </tr>

            <!-- 商品信息 -->
            <tr>
                <td colspan="1" width="50">
                    <div class="tips ">序号</div>
                </td>
                <!-- formInline.showPrice ? 4 : 6 -->
                <td colspan="5" width="250">
                    <div class="val">商品名称 </div>
                </td>
                <!-- formInline.showPrice ? 2 : 3 -->
                <td colspan="2" width="100">
                    <div class="tips">单位</div>
                </td>
                <!-- formInline.showPrice ? 1 : 1 -->
                <td colspan="1" width="50">
                    <div class="val">数量</div>
                </td>
                <td colspan="1" width="50">
                    <div class="val">单价</div>
                </td>
                <td colspan="1" width="50">
                    <div class="val">金额</div>
                </td>
                <td colspan="1" width="50">
                    <div class="val">备注</div>
                </td>
            </tr>

            <tr v-for="(goodItem, index) in orderDatalist.orderInfo" :key="index">
                <td colspan="1" width="50">
                    <div class="tips">{{ index + 1 }}</div>
                </td>
                <td colspan="5" width="250">
                    <div class="val">{{ goodItem.info.productName }} </div>
                </td>
                <td colspan="2" width="100">
                    <div class="tips">{{ goodItem.info.sku }}</div>
                </td>
                <td colspan="1" width="100">
                    <div class="val">{{ goodItem.info.payNum }}</div>
                </td>
                <td colspan="1" width="50">
                    <div class="val" v-if="formInline.showPrice">{{ goodItem.info.price }}</div>
                    <div class="val" v-else>**</div>
                </td>
                <td colspan="1" width="50">
                    <div class="val" v-if="formInline.showPrice">
                        {{ (goodItem.info.price * goodItem.info.payNum).toFixed(2) }}
                    </div>
                    <div class="val" v-else>**</div>
                </td>
                <td colspan="1" width="50">

                </td>
            </tr>

            <tr>
                <td colspan="2" width="100">
                    <div class="tips">使用积分</div>
                </td>
                <td colspan="2" width="100">
                    <div class="val">{{ orderDatalist.useIntegral }}</div>
                </td>
                <td colspan="1" width="100">
                    <div class="tips">抵扣金额</div>
                </td>
                <td colspan="1" width="100">
                    <div class="val" v-if="formInline.showPrice"
                        :style="{ color: orderDatalist.deductionPrice > 0 ? 'red' : 'black' }">{{
                            orderDatalist.deductionPrice }}</div>
                    <div class="val" v-else>**</div>
                </td>
                <td colspan="3" width="100">
                    <div class="tips">优惠券: {{ orderDatalist.couponName ? orderDatalist.couponName : "无" }}</div>
                </td>
                <td colspan="2" width="50">
                    <div class="tips">优惠券金额</div>
                </td>
                <td colspan="1" width="100">
                    <div class="val" v-if="formInline.showPrice"
                        :style="{ color: orderDatalist.couponPrice > 0 ? 'red' : 'black' }">
                        {{ orderDatalist.couponPrice }}
                    </div>
                    <div class="val" v-else>**</div>
                </td>
            </tr>

            <template v-if="orderDatalist.deliveryType === 'send'">
                <tr>
                    <td colspan="2" width="100">
                        <div class="tips">配送信息</div>
                    </td>
                    <td colspan="10" width="500">
                        <div class="val">
                            {{ orderDatalist.deliveryName }}
                            {{ orderDatalist.deliveryId }}
                        </div>
                    </td>
                </tr>
            </template>

            <tr>
                <td colspan="6" width="300">
                    <div class="val">
                        商家备注:
                        {{ orderDatalist.remark }}
                    </div>
                </td>
                <td colspan="3" width="150">
                    <div class="val">
                        合计数量:
                        {{ calNum(orderDatalist) }}
                    </div>
                </td>
                <td colspan="2" width="100" title="减去优惠券金额 减去抵扣金额">
                    <div class="val" v-if="formInline.showPrice && orderDatalist.deductionPrice <= 0">
                        合计金额：
                        {{ orderDatalist.proTotalPrice - orderDatalist.adminDiscountPrice - orderDatalist.deductionPrice }}
                    </div>
                    <div class="val" v-else-if="formInline.showPrice && orderDatalist.deductionPrice > 0">
                        合计金额：
                        {{ parseFloat(orderDatalist.proTotalPrice)}} - {{(parseFloat(orderDatalist.adminDiscountPrice) + parseFloat(orderDatalist.deductionPrice))}} = {{ orderDatalist.proTotalPrice - orderDatalist.adminDiscountPrice - orderDatalist.deductionPrice }}
                    </div>
                    <div class="val" v-else>
                        合计金额： **
                    </div>
                </td>
                <td colspan="1" width="50">
                    <div class="val">
                        订单折扣:
                        {{ formInline.discount }}
                    </div>
                </td>
            </tr>

            <tr>
                <td colspan="2" width="100">
                    <div class="tips">
                        买家备注
                    </div>
                </td>
                <td colspan="4" width="300">
                    <div class="val">
                        {{ orderDatalist.mark }}
                    </div>
                </td>
                <td colspan="2" width="100">
                    <div class="tips">
                        支付方式
                    </div>
                </td>
                <td colspan="4" width="300">
                    <div class="val" :style="{ color: orderDatalist.payTypeStr === '微信支付' ? 'red' : 'black' }">
                        {{ orderDatalist.payTypeStr }}
                    </div>
                </td>
            </tr>

            <!-- <tr>
                        <td colspan="2" width="100">
                            <div class="tips">用户信息</div>
                        </td>
                        <td colspan="2" width="200">
                            <div class="val">
                                {{ orderDatalist.nikeName }}
                                {{ orderDatalist.phone ? orderDatalist.phone : '无' }}
                            </div>
                        </td>
                        <td colspan="2" width="100" v-if="formInline.showPrice">
                            <div class="tips">商品总价</div>
                        </td>
                        <td colspan="2" width="100" v-if="formInline.showPrice">
                            <div class="val">{{ orderDatalist.proTotalPrice }}</div>
                        </td>

                    </tr> -->
            <!-- <tr>
                        <td colspan="2" width="100">
                            <div class="tips">支付方式</div>
                        </td>
                        <td colspan="2" width="100">
                            <div class="val">{{ orderDatalist.payTypeStr }}</div>
                        </td>
                        <td colspan="2" width="100">
                            <div class="tips">推广人</div>
                        </td>
                        <td colspan="2" width="100">
                            <div class="val">{{ orderDatalist.spreadName | filterEmpty }}</div>
                        </td>
                        <td colspan="2" width="100">
                            <div class="tips">订单状态</div>
                        </td>
                        <td colspan="4" width="200">
                            <div class="val" style="color: red;">{{ orderDatalist.statusStr.value }}</div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" width="100">
                            <div class="tips">商品总数</div>
                        </td>
                        <td colspan="2" width="100">
                            <div class="val">{{ orderDatalist.totalNum }}</div>
                        </td>

                        <td colspan="2" width="100" v-if="formInline.showPrice">
                            <div class="tips">优惠券金额</div>
                        </td>
                        <td colspan="2" width="100" v-if="formInline.showPrice">
                            <div class="val">{{ orderDatalist.couponPrice }}</div>
                        </td>
                        <td colspan="2" width="100" v-if="formInline.showPrice">
                            <div class="tips">支付邮费</div>
                        </td>
                        <td colspan="2" width="100" v-if="formInline.showPrice">
                            <div class="val">{{ orderDatalist.payPostage }}</div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2" width="100" v-if="formInline.showPrice">
                            <div class="tips">抵扣金额</div>
                        </td>
                        <td colspan="2" width="200" v-if="formInline.showPrice">
                            <div class="val">
                                {{ orderDatalist.deductionPrice }}
                            </div>
                        </td>
                        <td colspan="2" width="100" v-if="formInline.showPrice">
                            <div class="tips">实际支付</div>
                        </td>
                        <td colspan="2" width="100" v-if="formInline.showPrice">
                            <div class="val">{{ orderDatalist.payPrice }}</div>
                        </td>
                        <td colspan="2" width="100" v-if="formInline.showPrice">
                            <div class="tips">抵扣金额</div>
                        </td>
                        <td colspan="2" width="100" v-if="formInline.showPrice">
                            <div class="val">
                                {{ orderDatalist.deductionPrice }}
                            </div>
                        </td>
                    </tr> -->

            <template v-if="orderDatalist.deliveryType === 'express'">
                <tr>
                    <td colspan="2" width="100">
                        <div class="tips">物流信息 </div>
                    </td>
                    <td colspan="10" width="500">
                        <div class="val">
                            {{ orderDatalist.deliveryName }}
                            {{ orderDatalist.deliveryId }}
                        </div>
                    </td>
                </tr>
            </template>
            <!-- <template v-if="orderDatalist.mark">
                <tr>
                    <td colspan="2" width="100">
                        <div class="tips">用户备注</div>
                    </td>
                    <td colspan="10" width="500">
                        <div class="val">
                            {{ orderDatalist.mark }}
                        </div>
                    </td>
                </tr>
            </template> -->
            <!-- <tr>
                        <td colspan="2" width="100">
                            <div class="tips">商家备注</div>
                        </td>
                        <td colspan="10" width="500">
                            <div class="val">
                                {{ orderDatalist.remark }}
                            </div>
                        </td>
                    </tr> -->

            <!-- <template v-if="orderDatalist.refundPrice">
                        <tr v-if="formInline.showPrice">
                            <td colspan="2" width="100">
                                <div class="tips">退款金额</div>
                            </td>
                            <td colspan="10" width="500">
                                <div class="val">
                                    {{ orderDatalist.refundPrice }}
                                </div>
                            </td>
                        </tr>
                    </template> -->

            <!-- <template v-if="orderDatalist.useIntegral">
                <tr>
                    <td colspan="2" width="100">
                        <div class="tips">使用积分</div>
                    </td>
                    <td colspan="10" width="500">
                        <div class="val">
                            {{ orderDatalist.useIntegral }}
                        </div>
                    </td>
                </tr>
            </template> -->

            <!-- <template v-if="orderDatalist.backIntegral">
                <tr>
                    <td colspan="2" width="100">
                        <div class="tips">退回积分</div>
                    </td>
                    <td colspan="10" width="500">
                        <div class="val">
                            {{ orderDatalist.backIntegral }}
                        </div>
                    </td>
                </tr>
            </template> -->


            <template v-if="orderDatalist.refundReasonTime">
                <tr>
                    <td colspan="2" width="100">
                        <div class="tips">退款时间</div>
                    </td>
                    <td colspan="10" width="500">
                        <div class="val">
                            {{ orderDatalist.refundReasonTime }}
                        </div>
                    </td>
                </tr>
            </template>

            <template v-if="orderDatalist.shippingType === 2 && orderDatalist.statusStr.key === 'notShipped'">
                <tr>
                    <td colspan="2" width="100">
                        <div class="tips">门店名称</div>
                    </td>
                    <td colspan="10" width="500">
                        <div class="val">
                            {{ orderDatalist.storeName }}
                        </div>
                    </td>
                </tr>
            </template>

            <template v-if="orderDatalist.shippingType === 2 && orderDatalist.statusStr.key === 'notShipped'">
                <tr>
                    <td colspan="2" width="100">
                        <div class="tips">核销码</div>
                    </td>
                    <td colspan="10" width="500">
                        <div class="val">
                            {{ orderDatalist.user_phone }}
                        </div>
                    </td>
                </tr>
            </template>

            <template v-if="orderDatalist.statusStr.key === 'toBeWrittenOff' && orderDatalist.systemStore">
                <tr>
                    <td colspan="2" width="100">
                        <div class="tips">提货码</div>
                    </td>
                    <td colspan="2" width="100">
                        <div class="val">
                            {{ orderDatalist.verifyCode }}
                        </div>
                    </td>
                    <td colspan="2" width="100">
                        <div class="tips">门店名称</div>
                    </td>
                    <td colspan="2" width="100">
                        <div class="val">
                            {{ orderDatalist.systemStore.name }}
                        </div>
                    </td>
                    <td colspan="2" width="100">
                        <div class="tips">门店电话</div>
                    </td>
                    <td colspan="2" width="100">
                        <div class="val">
                            {{ orderDatalist.systemStore.phone }}
                        </div>
                    </td>
                    <td colspan="2" width="100">
                        <div class="tips">门店地址</div>
                    </td>
                    <td colspan="2" width="100">
                        <div class="val">
                            {{ orderDatalist.systemStore.address + orderDatalist.systemStore.detailedAddress }}
                        </div>
                    </td>
                </tr>
            </template>
        </table>
    </div>
</template>

<script>

export default {
    name: 'printTable',
    props: {
        formInline: {
        },
        orderDatalist: {}
    },
    data() {
        return {

        }
    },
    mounted() {
    },
    methods: {
        calNum() {
            let num = 0;
            for (let index = 0; index < this.orderDatalist.orderInfo.length; index++) {
                const element = this.orderDatalist.orderInfo[index];
                num += element.info.payNum
            }
            return num;
        }
    }
}
</script>

<style scoped lang="scss">
#printContent {
    color: #000000
}

.printTitle {
    font-size: 20px;
    text-align: center;
    margin: 20px 0;
}

.tips {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
}



.val {
    padding: 10px;
    line-height: 20px;
    width: 100%;
    box-sizing: border-box;
}




.logistics {
    align-items: center;
    padding: 10px 0px;

    .logistics_img {
        width: 45px;
        height: 45px;
        margin-right: 12px;

        img {
            width: 100%;
            height: 100%;
        }
    }

    .logistics_cent {
        span {
            display: block;
            font-size: 12px;
        }
    }
}

.trees-coadd {
    width: 100%;
    height: 400px;
    border-radius: 4px;
    overflow: hidden;

    .scollhide {
        width: 100%;
        height: 100%;
        overflow: auto;
        margin-left: 18px;
        padding: 10px 0 10px 0;
        box-sizing: border-box;

        .content {
            font-size: 12px;
        }

        .time {
            font-size: 12px;
            color: #2d8cf0;
        }

    }
}

.title {
    margin-bottom: 14px;
    color: #303133;
    font-weight: 500;
    font-size: 14px;
}

.description {
    &-term {
        display: table-cell;
        padding-bottom: 5px;
        line-height: 20px;
        width: 50%;
        font-size: 12px;
        color: #606266;
    }

    ::v-deep .el-divider--horizontal {
        margin: 12px 0 !important;
    }
}
</style>
